<template>
	<!-- 规格选择弹窗 start -->
	<view class="Specifications">
		<view class="Specifications-mask"></view>
		<view class="Specifications-popup">
			<view class="Specifications-popup-colse cuIcon-roundclose"></view>
			<view class="Specifications-popup-head">
				<view class="Specifications-popup-head-img">
					<image mode="widthFix" src="/static/logo.png"></image>
				</view>
				<view class="Specifications-popup-head-text">
					<view class="Specifications-popup-head-text-name">{{ info.name }}</view>
					<view class="Specifications-popup-head-text-price"><label for="">¥</label><text>{{ info.price }}</text></view>
					<view class="Specifications-popup-head-text-parameter">
						<text>剩余{{ info.store }}份</text>
						<text>每人限购{{ info.limit }}份</text>
					</view>
				</view>
			</view>
			<scroll-view scroll-y class="Specifications-huadong">

				<view class="Specifications-popup-sele" v-for="(item,index) in specifications" :key="index">
					<view class="Specifications-popup-sele-name">{{item.name}}</view>
					<view class="Specifications-popup-sele-list">
						<text :class=" item.start === index2 ?'rmoiu':'' " @click="morloe(index,index2)"
							v-for="(item2,index2) in item.children" :key="index2">{{item2.title}}</text>
					</view>
				</view>

			</scroll-view>
			<view class="Specifications-popup-munbar">
				<view class="Specifications-popup-munbar-name">购买数量</view>
				<view>
					<u-number-box v-model="value"></u-number-box>
				</view>
			</view>
			<view class="Specifications-popup-but">
				<label @click="addPhoto">上传照片</label>
			</view>
		</view>
	</view>
	<!-- 规格选择弹窗 end -->


</template>


<script>
	import { mapMutations } from 'vuex';
	export default {
		data() {
			return {
				specifications: [{
						id: 0,
						name: '尺寸',
						start: 0,
						value: 0,
						children: [{
								id: 101,
								title: '1寸'
							},
							{
								id: 102,
								title: '2寸'
							},
							{
								id: 103,
								title: '3寸'
							},
							{
								id: 104,
								title: '4寸'
							},
							{
								id: 105,
								title: '5寸'
							},
							{
								id: 106,
								title: 'A4'
							},
							{
								id: 107,
								title: '其他'
							}
						]
					},
					{
						id: 1,
						name: '相纸',
						start: 0,
						children: [{
								id: 101,
								title: '晶钻冷裱'
							},
							{
								id: 102,
								title: '富士晶彩光面'
							},
							{
								id: 103,
								title: '塑封'
							},
							{
								id: 104,
								title: '可达晶锐光面'
							},
							{
								id: 104,
								title: '柯达晶锐绒面'
							},
							{
								id: 104,
								title: '富士晶彩绒面'
							},
							{
								id: 104,
								title: '乐凯光面'
							},
							{
								id: 104,
								title: '乐凯绸面'
							},
							{
								id: 104,
								title: '乐凯绒面'
							},
						]
					}
				],
				change: [
					// 尺寸
					{id: 0, title: ''},
					// 相纸
					{id: 0, title: ''},
				],
				info: {
					id: 0,
					name: '普通打印',
					price: 0.28,
					store: 20,
					limit: 2
				}
			}
		},
		onLoad() {
			this.specifications.forEach((el, index) => {
				this.change[index] = el.children[el.start]
			})
		},
		methods: {
			...mapMutations('rinse', ['setRinseInfo']),
			morloe(index, index2) {
				this.change[index] = this.specifications[index].children[index2]
				this.specifications[index]['start'] = index2
			},
			addPhoto() {
				this.setRinseInfo({
					size: this.change[0],
					paper: this.change[1],
					price: this.info.price,
					count: 0,
				})
				uni.navigateTo({
					url: '/Self-rinse/rinse/putPhoto'
				})
			}
		}
	}
</script>




<style>
	/* 规格选择弹窗 start */

	.Specifications {
		width: 100%;
		height: 100%;
		position: fixed;
		bottom: 0px;
		left: 0px;
		z-index: 999;
	}

	.Specifications-mask {
		width: 100%;
		height: auto;
		position: fixed;
		top: 0px;
		bottom: 0px;
		left: 0px;
		right: 0px;
		margin: 0px auto;
		background: rgba(0, 0, 0, 0.4);
		z-index: 1000;
	}

	.Specifications-popup {
		width: 100%;
		height: auto;
		position: fixed;
		bottom: 0px;
		left: 0px;
		right: 0px;
		z-index: 1001;
		background: #fff;
		border-radius: 5px 5px 0px 0px;
	}

	.Specifications-popup-colse {
		position: absolute;
		top: 0px;
		right: 0px;
		font-size: 30px;
		color: #999;
		z-index: 1002;
	}

	.Specifications-popup-head {
		width: 94%;
		height: auto;
		margin: 0px auto;
		border-bottom: 1px #eee solid;
		display: flex;
		flex-direction: row;
		padding: 20rpx 0px;
	}

	.Specifications-popup-head-img {
		width: 25%;
	}

	.Specifications-popup-head-img image {
		width: 100%;
		height: 200rpx;
		border: 1px #eee solid;
		display: block;
	}

	.Specifications-popup-head-text {
		width: 75%;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		padding-left: 3%;
		justify-content: space-around;
	}

	.Specifications-popup-head-text-name {
		font-size: 16px;
		font-weight: bold;
		width: 90%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		color: #444;
	}

	.Specifications-popup-head-text-price {
		display: flex;
		flex-direction: row;
		color: #eaa02c;
		display: table-cell;
		vertical-align: bottom;
	}

	.Specifications-popup-head-text-price label {
		font-size: 12px;
		font-weight: bold;
		margin-right: 2%;
	}

	.Specifications-popup-head-text-price text {
		font-size: 18px;
	}

	.Specifications-popup-head-text-parameter {
		font-size: 13px;
		color: #888;
	}

	.Specifications-popup-head-text-parameter text {
		margin-right: 3%;
	}

	.Specifications-huadong {
		width: 100%;
		max-height: 600rpx;
		padding-top: 10px;
	}

	.Specifications-popup-sele {
		width: 100%;
		height: auto;
		box-sizing: border-box;
		padding: 0px 3%;
	}

	.Specifications-popup-sele-name {
		width: 100%;
		height: auto;
		font-size: 15px;
		color: #333;
		margin-bottom: 15px;
	}

	.Specifications-popup-sele-list {
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.Specifications-popup-sele-list text {
		color: #fe7b2e;
		margin: 0px 0%;
		border-radius: 4px;
		text-align: center;
		box-sizing: border-box;
		min-width: 30%;
		border: 1px #fe7b2e solid;
		margin-bottom: 15px;
		font-size: 14px;
		line-height: 33px;
		padding: 0px 2%;
		margin-right: 3%;
	}

	.Specifications-popup-munbar {
		width: 100%;
		height: auto;
		box-sizing: border-box;
		padding: 40rpx 5%;
		display: flex;
		justify-content: space-between;
	}

	.Specifications-popup-but {
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 10px 3%;
		box-sizing: border-box;
		border-top: 1px #eee solid;
	}

	.Specifications-popup-but label {
		text-align: center;
		color: #fff;
		height: 100rpx;
		line-height: 100rpx;
		/* background-image:linear-gradient(#ff4f19,#E33E33); */
		background: #E31D1A;
		border-radius: 40px;
		letter-spacing: 3px;
	}

	.none {
		bottom: -100%;
	}

	.none .Specifications-popup {
		bottom: -100%;
		transition: all 0.5s;
	}

	.none .Specifications-mask {
		display: none;
		transition: all 0.5s;
	}


	.show {
		bottom: 0px;
	}

	.show .Specifications-popup {
		bottom: 0%;
		transition: all 0.5s;
	}

	.show .Specifications-mask {
		display: block;
		transition: all 0.5s;
	}

	.rmoiu {
		background: #ff8d00;
		color: #fff !important;
	}

	/* 规格选择弹窗 end */
</style>